<template>
	<view class="center">
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<u-toast ref="uToast" />
		<view class="user_info box_radius">
			<u-form :model="addForm" ref="uForm">
				<u-form-item label="输入新密码" prop="password" label-width="180" :label-style="{'padding-left': '20rpx'}">
					<u-input input-align="right" type="password" placeholder="请输入新的密码" :password-icon="false"
						:clearable="false" :custom-style="{'padding-right': '20rpx'}" v-model="addForm.password" />
				</u-form-item>
				<u-form-item label="验证码" prop="smsCode" label-width="180" :label-style="{'padding-left': '20rpx'}">
					<u-input input-align="right" placeholder="请输入验证码" :clearable="false" v-model="addForm.smsCode"
						type="number" :custom-style="{'padding-right': '20rpx'}"></u-input>
					<u-button slot="right" type="primary" size="mini" @click="getCode" style="margin-right: 20rpx;">
						{{codeTips}}</u-button>
				</u-form-item>
			</u-form>
			<button class="enter " @click="geteditPassword">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		editPassword
	} from '@/api/my.js'
	import {
		getSms
	} from '@/api/register.js'
	export default {
		data() {
			return {
				codeTips: '', //验证码倒计时
				addForm: {
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					smsCode: '',
					phone: '',
					password: ''
				},
				rules: {
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}],
					smsCode: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId')
			this.getUserInfos(this.userId)
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {

		},
		methods: {
			//修改密码
			geteditPassword() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						editPassword(this.addForm).then(res => {
							this.$refs.uToast.show({
								title: res.msg,
								icon: false,
								type: 'success'
							})
							uni.clearStorageSync(); //清除缓存
							uni.reLaunch({
								url: "/pages/login/index",
							});
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
					} else {
						return false
					}
				});
			},
			// 获取验证码
			getCode() {
				if (this.addForm.phone) {
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						getSms({
							phone: this.addForm.phone
						}).then(res => {
							uni.hideLoading();
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				} else {
					this.$u.toast('请刷新重试');
				}
			},
			//获取个人信息
			getUserInfos(id) {
				getUserInfo({
					userId: id
				}).then(res => {
					this.addForm.phone = res.data.mobile
					console.log(this.addForm.phone)
				}).catch(err => {})
			},
			codeChange(text) {
				this.codeTips = text;
			},
		}
	}
</script>

<style scoped lang="scss">
	.user_info {
		background-color: #f2f1f1;
		margin: 20rpx 0;
		padding: 10rpx 0;

		.inro {
			line-height: 80rpx;
			padding: 10rpx 20rpx;
		}
	}

	.enter {
		letter-spacing: 8rpx;
		overflow: hidden;
		border-color: #4880ff;
		font-size: 32rpx;
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%, 0);
		width: 95%;
		margin: 40rpx 0 0 0;
		background-color: #4880ff;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		padding: 10rpx 0;
		border-radius: $uni-border-radius-lg;
	}
</style>
